<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>导览解说点位管理</title>
		<link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
		<link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="../../static/css/skins.css">
		<script type="text/javascript" src="../../lib/vue/vue.js"></script>
		<script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
		<script type="text/javascript" src="../../lib/element-ui/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
		<script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
		<script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
		<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
		<script type="text/javascript" src="../../static/js/webApi.js"></script>
		<script type="text/javascript" src="../../static/js/tool.js"></script>
		<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&
        ak=87f5cb8cf775ca274ab7bd690386562a"></script>
		<script type="text/javascript" charset="utf-8" src="../../static/UEditor/ueditor.config.js"></script>
		<script type="text/javascript" charset="utf-8" src="../../static/UEditor/ueditor.all.js"></script>
		<script type="text/javascript" charset="utf-8" src="../../static/UEditor/lang/zh-cn/zh-cn.js"></script>
		<style type="text/css">
			/*
            找到html标签、body标签，和挂载的标签
            都给他们统一设置样式
        */
			html,
			body,
			#app,
			.el-container {
				/*设置内部填充为0，几个布局元素之间没有间距*/
				padding: 0px;
				/*外部间距也是如此设置*/
				margin: 0px;
				/*统一设置高度为100%*/
				height: 100%;
			}

			.el-main {
				padding: 4px;
			}

			.el-icon-search {
				color: #409EFF;
			}

			.el-icon-refresh-right {
				color: #409EFF;
			}

			[v-cloak] {
				display: none;
			}

			.avatar-uploader .el-upload {
				border: 1px dashed #d9d9d9;
				border-radius: 6px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
			}

			.avatar-uploader .el-upload:hover {
				border-color: #409EFF;
			}

			.avatar-uploader-icon {
				font-size: 28px;
				color: #8c939d;
				width: 108px;
				height: 108px;
				line-height: 108px;
				text-align: center;
			}

			.avatar {
				width: 108px;
				height: 108px;
				display: block;
			}

			#mapContent {
				width: 100%;
				height: 90%;
				overflow: hidden;
				margin: 0;
				font-family: "微软雅黑";
			}
		</style>
	</head>
	<body>
		<el-container id="app" v-cloak>
			<el-main>
				<el-form :inline="true" :model="queryData" ref="queryData" label-width="100px" label-position="right"
					size="mini" style="height: 35px" @submit.native.prevent>
					<el-form-item label="解说点位置">
						<el-input v-model="queryData.address" clearable placeholder="请输入解说点位置"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button size="mini" icon="el-icon-search" @click="searchEvent">查询</el-button>
						<el-button size="mini" icon="el-icon-refresh-right" @click="searchEventA">重置</el-button>
					</el-form-item>
				</el-form>

				<vxe-grid border ref="xGrid" @page-change="handlePageChange" resizable show-overflow
					highlight-current-row="true" keep-source :height="tableHeight" size="mini"
					:checkbox-config="tableRadio" :pager-config="tablePage" :data="tableData"
					:header-cell-style="{'text-align':'center'}" :loading="dataLoading" :toolbar="tableToolbar"
					:export-config="tableExport" @cell-dblclick="cellDBLClickEvent"
					:edit-config="{trigger:'click', mode:'row'}" @toolbar-button-click="toolbarButtonClickEvent"
					:sort-config="{remot:true}" @sort-change="tableSortChange">
					<vxe-table-column type="checkbox" width="60" align="center"></vxe-table-column>
					<vxe-table-column field="id" title="序号" width="60" align="center">
					</vxe-table-column>
					<vxe-table-column field="address" title="解说点位置" align="left">
					</vxe-table-column>
					<vxe-table-column field="longitude" title="经度" align="center">
					</vxe-table-column>
					<vxe-table-column field="latitude" title="纬度" align="center">
					</vxe-table-column>
					<vxe-table-column field="content" title="解说词" align="left">
					</vxe-table-column>
					<vxe-table-column field="coverImg" title="封面图片" width="120">
						<template #default="{ row }">
							<el-popover placement="left" title trigger="hover">
								<img v-if="row.coverImg" :src="row.coverImg" :alt="row.coverImg"
									style="max-height: 500px;max-width: 500px" />
								<img slot="reference" :src="row.coverImg" style="width: 100px;">
							</el-popover>
						</template>
					</vxe-table-column>
					<vxe-table-column field="attachment" title="附件" align="center" width="120">
						<template #default="{ row }">
							<vxe-button @click="attDetailEvent(row)">管理附件</vxe-button>
						</template>
					</vxe-table-column>
					<vxe-table-column field="lineNum" title="所在线路数" align="center">
						<template #default="{ row }">
							<span>{{ row.lineNum }}</span>
							<vxe-button type="text" @click="lineDetailEvent(row)"><i
									class="el-icon-search"></i></vxe-button>
						</template>
					</vxe-table-column>
					<vxe-table-column field="createUser" title="创建人" align="center">
					</vxe-table-column>
					<vxe-table-column field="createTime" title="创建时间" align="center" :formatter="formatDate">
					</vxe-table-column>
				</vxe-grid>

				<vxe-modal ref="xModal" v-model="showEdit" :title="selectRow ? '编辑&保存' :'新增&保存'" width="800"
					 resize id="formWindow">
					<el-form v-loading="submitLoading" :model="formData" :rules="formRules" ref="formData" label-width="120px"
						label-position="right" size="mini">
						<template v-if="visible===true">
							<el-form-item label="ID" prop="id">
								<el-input v-model="formData.id"></el-input>
							</el-form-item>
						</template>
						<el-form-item label="解说点位置" prop="address">
							<el-input type="text" v-model="formData.address" placeholder="请填写解说点位置" maxlength="100"
								show-word-limit></el-input>
						</el-form-item>
						<el-form-item label="解说词" prop="content">
							<div id="contentEditor" v-model="formData.content"></div>
						</el-form-item>

						<el-form-item label="经纬度">
							<el-input type="text" width="80%">
								<el-button @click="editMapMaker" size="mini" style="display: block; margin: 0 auto;"
									slot="prepend">选择解说点坐标
								</el-button>
								<el-input type="text" v-model="formData.longitude" placeholder="请选择坐标" :readonly="true"
									slot="prefix">
									<template slot="prepend">经度</template>
								</el-input>
								<el-input type="text" v-model="formData.latitude" placeholder="请选择坐标" :readonly="true"
									slot="suffix">
									<template slot="prepend">纬度</template>
								</el-input>
							</el-input>
						</el-form-item>
						<el-form-item label="封面图片" prop="coverImg">
							<el-upload class="avatar-uploader" :action="this.uploadUrl" :show-file-list="false"
								:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
								<img v-if="imageUrl" :src="imageUrl" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</el-form-item>
						<el-form-item label="附件" prop="attachment">
							<el-upload class="upload-demo" :action="this.uploadUrl" :on-change="fileListChange"
								:on-remove="fileListRemove" multiple :file-list="this.fileList"
								:before-upload="beforeAttUpload">
								<el-button size="small" type="primary">点击上传</el-button>
							</el-upload>
						</el-form-item>
						<el-form-item style="text-align: right;">
							<el-button type="primary" icon="el-icon-folder" @click="submitEvent('formData')"
								:disabled="disabled" v-cloak>保存</el-button>
							<el-button type="warning" icon="el-icon-refresh" @click="resetEvent('formData')" v-cloak>
								重置
							</el-button>
							<el-button type="warning" icon="el-icon-switch-button" @click="closeEvent('formData')"
								v-cloak>
								退出
							</el-button>
						</el-form-item>
					</el-form>
				</vxe-modal>

				<vxe-modal destroy-on-close resize title="选择坐标" v-model="gridmapModal" width="60%" height="80%">
					<div id="mapContent"></div>
					<div style="text-align: end;padding: 10px">
						<el-button @click="addressConfirm" icon="el-icon-folder" type="primary" size="mini"
							v-cloak>确认</el-button>
						<el-button @click="closeMapModel" icon="el-icon-switch-button" type="warning" size="mini"
							v-cloak>
							退出
						</el-button>
					</div>
				</vxe-modal>

				<vxe-modal destroy-on-close resize title="管理附件" v-model="attDetailModal" width="60%" height="80%">
					<div style="text-align: start;padding: 10px">
						<el-upload class="avatar-uploader" :action="this.uploadUrl" :show-file-list="false"
							:on-success="handleAttSuccess" :before-upload="beforeAttUpload">
							<el-button size="mini" icon="el-icon-plus">新增</el-button>
						</el-upload>
					</div>

					<vxe-grid border ref="attGrid" resizable show-overflow highlight-current-row="true" keep-source
						height="80%" size="mini" :data="attData" :header-cell-style="{'text-align':'center'}">
						<vxe-table-column field="attName" title="附件名称" align="center">
							<template #default="{ row }">
								<a :href="row.dldLink" v-if="row.dldLink" target="_black">{{ row.attName }}</a>
							</template>
						</vxe-table-column>
						<vxe-table-column field="attPath" title="附件路径" align="center">
						</vxe-table-column>
						<vxe-table-column field="addType" title="附件类型" align="center">
						</vxe-table-column>
						<vxe-table-column field="attSize" title="附件大小" align="center">
						</vxe-table-column>
						<vxe-table-column field="attStatus" title="附件状态" align="center">
							<template #default="{ row }">
								<template v-if="row.dldLink == attRow.useAtt">
									<span style="color: green;">启用</span>
								</template>
								<template v-else>
									<span style="color: red;">停用</span>
								</template>
							</template>
						</vxe-table-column>
						<vxe-table-column field="attOption" title="操作" align="center" width="225">
							<template #default="{ row }">
								<vxe-button @click="attOptionStart(row)">启用</vxe-button>
								<vxe-button @click="attOptionStop(row)">停用</vxe-button>
								<vxe-button @click="attOptionDelete(row)" icon="el-icon-delete">删除</vxe-button>
							</template>
						</vxe-table-column>
					</vxe-grid>

					<div style="text-align: end;padding: 10px">
						<el-button @click="attConfirm" icon="el-icon-folder" type="primary" size="mini"
							v-cloak>保存</el-button>
						<el-button @click="closeAttModel" icon="el-icon-switch-button" type="warning" size="mini"
							v-cloak>
							退出
						</el-button>
					</div>
				</vxe-modal>

				<vxe-modal destroy-on-close resize title="线路详情" v-model="lineDetailModal" width="60%" height="80%">

					<vxe-grid border ref="lineGrid" resizable show-overflow highlight-current-row="true" keep-source
						height="80%" size="mini" :data="lineData" :header-cell-style="{'text-align':'center'}">
						<vxe-table-column field="id" title="序号" width="60" align="center">
						</vxe-table-column>
						<vxe-table-column field="name" title="线路名称" align="center">
						</vxe-table-column>
						<vxe-table-column field="remark" title="备注" align="left">
						</vxe-table-column>
						<vxe-table-column field="pointAddress" title="解说点位" align="center">
						</vxe-table-column>
						<vxe-table-column field="createUser" title="创建人" align="center">
						</vxe-table-column>
						<vxe-table-column field="createTime" title="创建时间" align="center" :formatter="formatDate">
						</vxe-table-column>
					</vxe-grid>

				</vxe-modal>

			</el-main>
		</el-container>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			var main = {
				data() {
					return {
						//排序
						prop: '',
						order: '',
						dataLoading: false,
						loading: false,
						disabled: false,
						visible: false,
						tableHeight: '100%',
						departOptions: [],
						tableData: [],
						attData: [],
						lineData: [],
						uploadUrl: "",
						fileList: [],
						gridmapModal: false,
						attDetailModal: false,
						lineDetailModal: false,
						mapLnt: "",
						mapLat: "",
						map: null,
						imageUrl: '',
						contentEditor: null,
						attRow: {
							id: "",
							useAtt: ""
						},
						tablePage: {
							perfect: true,
							total: 0,
							currentPage: 1,
							pageSize: 30,
							align: 'left',
							pageSizes: [30, 50, 100, 200],
							layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump',
								'Total'
							],
						},
						tableToolbar: {
							id: 'toolbar',
							size: 'mini',
							perfect: true,
							buttons: [],
						},
						tableExport: {
							filename: 'export',
							sheetName: 'Sheet1',
							type: 'xlsx',
							// 自定义类型
							types: ['xlsx', 'csv', 'html', 'xml', 'txt']
						},
						tableRadio: {
							trigger: 'row',
							highlight: true
						},
						submitLoading: false,
						selectRow: null,
						showEdit: false,
						queryData: {
							address: ""
						},
						formData: {
							id: "",
							address: "",
							longitude: "",
							latitude: "",
							content: "",
							coverImg: "",
							attachment: []
						},
						formRules: {
							address: [{
									required: true,
									message: '请输入解说点位置'
								},
								{
									min: 1,
									max: 100,
									message: '长度在1到100个字符'
								}
							]
						}
					}
				},
				created() {
					this.findList();
					this.getBtn();
					this.uploadUrl = window.curl + '/attach/uploadAtt';
					UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
					UE.Editor.prototype.getActionUrl = function(action) {
						if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadvideo') {
							let path = window.curl + '/attach/uploadUeditorAtt';
							return path; //调用后台接口上传图片   
						} else {
							return this._bkGetActionUrl.call(this, action);
						}
					}
					this.contentEditor = UE.getEditor('contentEditor', {
						toolbars: [
							[
								'undo', 'redo', 'bold', 'italic',
								'underline', 'fontborder', 'backcolor', 'fontsize', 'fontfamily',
								'justifyleft', 'justifyright', 'justifycenter', 'justifyjustify',
								'strikethrough', 'removeformat',
								'formatmatch', '|',
								'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist',
								'selectall', 'cleardoc', 'link', 'unlink', 'emotion', '|', 'help'
							]
						],
						initialFrameWidth: '99%',
						initialFrameHeight: 250,
						elementPathEnabled: false, //删除元素路径
						pasteplain: true,
						/* 纯文本粘贴 */
						autoHeightEnabled: true,
						/* 启用右侧滚轮,默认是true自动长高模式*/
						autoFloatEnabled: true
					});
				},
				mounted() {
					this.tableHeight = window.innerHeight - this.$refs.xGrid.$el.offsetTop - 5;
				},
				methods: {
					searchEvent() {
						this.findList();
					},
					searchEventA() {
						this.queryData.address = "";
						this.findList();
					},
					getTreeData(data) {
						for (let i = 0; i < data.length; i++) {
							if (data[i].children.length < 1) {
								// children若为空数组，则将children设为undefined
								data[i].children = undefined;
							} else {
								// children若不为空数组，则继续 递归调用 本方法
								this.getTreeData(data[i].children);
							}
						}
						return data;
					},
					getBtn() {
						this.tableToolbar.buttons = []
						let bts = Tool.getButton()
						let btns = []
						this.tableToolbar.buttons = btns.concat(bts)
					},
					//分页
					handlePageChange({
						currentPage,
						pageSize
					}) {
						this.tablePage.currentPage = currentPage
						this.tablePage.pageSize = pageSize
						this.findList()
					},
					findList() {
						let queryParams = Object.assign({
							page: this.tablePage.currentPage,
							rows: this.tablePage.pageSize,
							address: this.queryData.address
						});
						this.dataLoading = true;
						var object = this;
						webApi("/explanationPoint/getExplanationPointPage", "post", queryParams, function(data) {
							object.tableData = data.data.list;
							object.tablePage.total = data.data.total
							object.dataLoading = false;
							// object.getDepartOptions();
						}, function(data) {
							object.tableData = [];
							object.tablePage.total = 0
							object.dataLoading = false;
						});
					},
					getDepartOptions() {
						let that = this;
						webApi('/org/getOrgOptions', 'post', {}, function(data) {
							that.departOptions = that.getTreeData(data.data);
						}, function(xhr, type, errorThrown) {})
					},
					searchEvent(formName, acType) {
						if (acType == 0) {
							this.queryData.address = "";
						}
						this.tablePage.currentPage = 1
						this.findList()
					},
					formatDate({
						cellValue
					}) {
						return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')
					},
					toolbarButtonClickEvent({
						code
					}, event) {
						switch (code) {
							case 'reset':
								this.searchEvent(this.queryData, 0)
								break;
							case 'search':
								this.searchEvent(this.queryData, 1)
								break;
							case 'btnInsert':
								var row = this.$refs.xGrid.getCheckboxRecords();
								if (row) {
									var parentCode = row.parentMenuId;
								} else {
									var parentCode = "";
								}
								this.insertEvent(parentCode);
								break;
							case 'btnUpdate':
								if (this.$refs.xGrid.getCheckboxRecords().length == 1) {
									let row = this.$refs.xGrid.getCheckboxRecords()
									this.editEvent(row[0]);
								} else if (this.$refs.xGrid.getCheckboxRecords().length > 1) {
									this.$message({
										message: "数据大于一条，无法修改",
										type: 'warning',
										center: true
									});
								} else {
									this.$message({
										message: "请选择一行数据",
										type: 'warning',
										center: true
									});
								}
								break;
							case 'btnDelete':
								var row = this.$refs.xGrid.getCheckboxRecords();
								// console.log(row)
								if (row.length > 0) {
									this.removeEvent(row);
								} else {
									this.$message({
										message: "请选择需要删除的数据行",
										type: 'warning',
										center: true
									});
								}
								break;
							case 'btnExport':
								this.$refs.xGrid.exportData({
									filename: '菜单列表',
									sheetName: 'Sheet1',
									type: 'xlsx'
								});
								break;
						}
					},
					insertEvent() {
						this.formData = {
							id: "",
							address: "",
							longitude: "",
							latitude: "",
							content: "",
							coverImg: "",
							attachment: []
						};
						this.fileList = []
						this.imageUrl = '';
						this.contentEditor.setContent("");
						this.selectRow = null;
						this.showEdit = true;
					},
					submitEvent(formName) {
						// console.log(this.formData)
						this.$refs[formName].validate((valid) => {
							if (valid) {
								this.submitLoading = true;
								this.disabled = true;
								this.formData.content = UE.getEditor('contentEditor').getContent()
								let params = Object.assign(this.formData);
								let that = this;
								webApi('/explanationPoint/saveExplanationPoint', 'post', params, function(
									data) {
									that.submitLoading = false;
									if (data.code === 200) {
										that.findList();
										that.$message({
											message: '操作成功',
											type: 'success',
											center: true
										});
										that.showEdit = false;
									} else {
										that.$message({
											message: '操作失败',
											type: 'error',
											center: true
										});
									}
									that.disabled = false;
								}, function(xhr, type, errorThrown) {
									that.submitLoading = false;
								});

							} else {
								return false;
							}
						});
					},
					resetEvent(formName) {
						this.formData = {
							address: "",
							longitude: "",
							latitude: "",
							content: "",
							coverImg: "",
							attachment: []
						};
						this.fileList = []
						this.imageUrl = '';
						this.contentEditor.setContent("");
					},
					closeEvent(formName) {
						this.showEdit = false;
					},
					editEvent(row) {
						this.formData = {
							id: row.id,
							address: row.address,
							longitude: row.longitude,
							latitude: row.latitude,
							content: row.content,
							coverImg: row.coverImg,
							attachment: row.attachment
						};
						this.imageUrl = row.coverImg;
						this.fileList = []
						row.attachment.forEach(element => {
							let fileData = {
								name: element.attName,
								attName: element.dldLink,
								response: {
									data: {
										original: element.attName,
										title: element.attName,
										url: element.dldLink,
										viewUrl: element.attPath
									}
								}
							}
							this.fileList.push(fileData);
						});
						this.selectRow = row;
						this.showEdit = true;
						this.contentEditor.setContent(this.formData.content);

					},
					removeEvent(row) {
						this.$XModal.confirm('您确定要删除该数据?').then(type => {
							if (type === 'confirm') {
								this.submitLoading = true;
								let that = this
								let ids = ""
								row.forEach(item => {
									ids += item.id + ","
								});
								ids = ids.substring(0, ids.length - 1);
								let params = Object.assign({
									id: ids
								});
								webApi('/explanationPoint/removeExplanationPoint', 'post', params, function(
									data) {
									if (data.code == 200) {
										that.findList()
										that.$message({
											message: data.msg,
											type: 'success',
											center: true
										});
										that.showEdit = false;
									} else {
										that.$message({
											message: data.msg,
											type: 'error',
											center: true
										});
									}
									that.disabled = false;
								}, function(xhr, type, errorThrown) {});
								this.submitLoading = false;
							}
						});
					},
					fileListChange(file, fileList) {
						if (file.response != null) {
							let fileData = {
								attSize: file.size,
								uid: file.uid,
								attName: file.response.data.original,
								attPath: file.response.data.viewUrl,
								dldLink: file.response.data.url
							}
							this.formData.attachment.push(fileData);
						}
					},
					fileListRemove(file, fileList) {
						//console.log(file);
						//console.log(this.formData.annex);
						for (let i = 0; i < this.formData.attachment.length; i++) {
							if (file.response.data.viewUrl == this.formData.attachment[i].attPath) {
								this.formData.attachment.splice(i, 1);
							}
						}
						//console.log(file);
						//console.log(this.formData.annex);
					},
					cellDBLClickEvent({
						row
					}) {
						this.editEvent(row);
					},
					checkColumnMethod({
						column
					}) {
						if (['companyNo', 'name'].includes(column.property)) {
							return false
						}
						return true
					},
					//表头列排序
					tableSortChange(column, prop, order) {
						//点击排序按钮后拿到column.order，可以发送column.order给后台，后台再根据什么排序来返回排序过后的数据
						// console.log(column + '---' + column.prop + '---' + column.order)
						this.order = column.order;
						this.prop = column.prop;
						this.findList();
					},
					handleAvatarSuccess(res, file) {
						if (res.code == 200) {
							// console.log(res);
							// console.log(file);
							this.formData.coverImg = res.data.url
							this.imageUrl = URL.createObjectURL(file.raw);
						}
					},
					beforeAvatarUpload(file) {
						const isImg = file.type.includes("image");
						const isLt10M = file.size / 1024 / 1024 < 10;
						if (!isImg) {
							this.$message.error('上传头像必须是图片格式');
						}
						if (!isLt10M) {
							this.$message.error('上传头像图片大小不能超过 2MB!');
						}
						return isImg && isLt10M;
					},
					beforeAttUpload(file) {
						const isAudio = file.type.includes("audio");
						const isLt10M = file.size / 1024 / 1024 < 10;
						if (!isAudio) {
							this.$message.error('上传附件必须是音频格式');
						}
						if (!isLt10M) {
							this.$message.error('上传附件大小不能超过 10MB!');
						}
						return isAudio && isLt10M;
					},
					attDetailEvent(row) {
						this.attRow = {
							id: row.id,
							useAtt: row.useAtt
						};
						this.attData = row.attachment.concat();
						this.attDetailModal = true;
					},
					lineDetailEvent(row) {
						if (row.lineNum > 0) {
							let params = Object.assign({
								id: row.id
							});
							let object = this;
							webApi("/explanationPoint/getExplanationPointOnLine", "post", params, function(res) {
								object.lineData = res.data;
								object.lineDetailModal = true;
							}, function(data) {
								object.lineData = [];
								object.lineDetailModal = true;
							});
						} else {
							this.$message('该点位无对应线路');
						}
					},
					attOptionStart(row) {
						this.attRow.useAtt = row.dldLink;
					},
					attOptionStop(row) {
						if (this.attRow.useAtt && this.attRow.useAtt == row.dldLink) {
							this.attRow.useAtt = '-';
						}
					},
					attOptionDelete(row) {
						for (let i = 0; i < this.attData.length; i++) {
							if (row.attPath == this.attData[i].attPath) {
								this.attData.splice(i, 1);
							}
						}
					},
					handleAttSuccess(res, file) {
						if (res.code == 200) {
							let i = file.response.data.original.lastIndexOf(".");
							let len = file.response.data.original.length;
							let type = i > 0 ? (i + 1) == len ? " " : file.response.data.original.substring(i + 1) :
								" ";

							let fileData = {
								attSize: file.size,
								uid: file.uid,
								attName: file.response.data.original,
								attPath: file.response.data.viewUrl,
								dldLink: file.response.data.url,
								addType: type
							}
							this.attData.push(fileData);
						}
					},
					attConfirm() {
						let params = {
							id: this.attRow.id,
							useAtt: this.attRow.useAtt,
							attachment: this.attData
						};
						let that = this;
						webApi('/explanationPoint/editExplanationPoint', 'post', params, function(data) {
							if (data.code === 200) {
								that.findList()
								that.$message({
									message: '操作成功',
									type: 'success',
									center: true
								});
								that.attRow = {
									id: "",
									useAtt: ""
								};
								that.attDetailModal = false;
							} else {
								that.$message({
									message: '操作失败',
									type: 'error',
									center: true
								});
							}
						}, function(xhr, type, errorThrown) {});
					},
					closeAttModel() {
						this.attRow = {
							id: "",
							useAtt: ""
						};
						this.attDetailModal = false;
					},
					editMapMaker() {
						//初始化地图
						this.gridmapModal = true;
						setTimeout(() => {
							this.initMap();
						}, 100)
					},
					initMap() {
						// GL版命名空间为BMapGL
						// 按住鼠标右键，修改倾斜角和角度
						var map = new BMapGL.Map("mapContent"); // 创建Map实例
						this.map = map;
						let object = this;
						if (object.formData.longitude && object.formData.latitude) {
							map.clearOverlays();
							setTimeout(function() {
								let convertor = new BMapGL.Convertor();
								let ggPoint = new BMapGL.Point(object.formData.longitude, object.formData
									.latitude);
								let pointArr = [];
								pointArr.push(ggPoint);
								convertor.translate(pointArr, COORDINATES_GCJ02, COORDINATES_BD09, function(
									data) {
									if (data.status === 0) {
										map.addOverlay(new BMapGL.Marker(data.points[0]));
										object.mapLnt = data.points[0].lng;
										object.mapLat = data.points[0].lat;
									}
								});
							}, 1000);
						}
						map.centerAndZoom(new BMapGL.Point(99.951034, 27.864876), 13); // 初始化地图,设置中心点坐标和地图级别
						map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
						map.addEventListener('click', function(e) {
							object.mapLnt = e.latlng.lng;
							object.mapLat = e.latlng.lat;
							map.clearOverlays();
							var marker = new BMapGL.Marker(new BMapGL.Point(e.latlng.lng, e.latlng.lat));
							map.addOverlay(marker);
						});
					},
					addressConfirm() {
						let convertor = new BMapGL.Convertor();
						let ggPoint = new BMapGL.Point(this.mapLnt, this.mapLat);
						let pointArr = [];
						let object = this;
						pointArr.push(ggPoint);
						// console.log(pointArr);
						convertor.translate(pointArr, COORDINATES_BD09, COORDINATES_GCJ02, function(data) {
							// console.log(data);
							if (data.status === 0) {
								// console.log(data.points[0]);
								object.formData.longitude = data.points[0].lng;
								object.formData.latitude = data.points[0].lat;
							} else {
								object.formData.longitude = object.mapLnt;
								object.formData.latitude = object.mapLat;
							}
						});
						setTimeout(() => {
							this.gridmapModal = !this.gridmapModal
						}, 100)
					},
					closeMapModel() {
						this.gridmapModal = false;
					}
				}
			};

			var vue = Vue.extend(main);
			new vue().$mount('#app');
		}
	</script>
</html>